<template>
  <view class="order-container">
    <!-- 订单状态 -->
    <view class="order-status">
      <view class="status-icon" :class="'status-' + orderInfo.status">
        <text class="iconfont">{{ statusIcon }}</text>
      </view>
      <view class="status-info">
        <text class="status-text">{{ orderInfo.statusText }}</text>
        <text class="status-desc">{{ statusDesc }}</text>
      </view>
    </view>
    
    <!-- 收货地址 -->
    <view class="address-section" v-if="orderInfo.address">
      <view class="section-header">
        <text class="section-title">收货地址</text>
      </view>
      <view class="address-info">
        <view class="address-contact">
          <text class="contact-name">{{ orderInfo.address.name }}</text>
          <text class="contact-phone">{{ orderInfo.address.phone }}</text>
        </view>
        <text class="address-detail">{{ orderInfo.address.detail }}</text>
      </view>
    </view>
    
    <!-- 商品信息 -->
    <view class="goods-section">
      <view class="section-header">
        <text class="section-title">商品信息</text>
      </view>
      <view class="goods-list">
        <view class="goods-item" v-for="(item, index) in orderInfo.goods" :key="index">
          <image :src="item.image" class="goods-image"></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.name }}</text>
            <text class="goods-spec">{{ item.spec }}</text>
            <view class="goods-price-section">
              <view class="price-info">
                <text class="goods-original-price">¥{{ item.originalPrice }}</text>
                <text class="goods-price">¥{{ item.price }}</text>
                <text class="goods-unit">/{{ item.unit }}</text>
              </view>
              <text class="goods-quantity">x{{ item.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-info-section">
      <view class="section-header">
        <text class="section-title">订单信息</text>
      </view>
      <view class="info-list">
        <view class="info-item">
          <text class="label">订单号：</text>
          <text class="value">{{ orderInfo.orderNo }}</text>
          <text class="copy-btn" @click="copyOrderNo">复制</text>
        </view>
        <view class="info-item">
          <text class="label">下单时间：</text>
          <text class="value">{{ orderInfo.createTime }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.payTime">
          <text class="label">支付时间：</text>
          <text class="value">{{ orderInfo.payTime }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.shipTime">
          <text class="label">发货时间：</text>
          <text class="value">{{ orderInfo.shipTime }}</text>
        </view>
        <view class="info-item" v-if="orderInfo.finishTime">
          <text class="label">完成时间：</text>
          <text class="value">{{ orderInfo.finishTime }}</text>
        </view>
      </view>
    </view>
    
    <!-- 费用明细 -->
    <view class="amount-section">
      <view class="section-header">
        <text class="section-title">费用明细</text>
      </view>
      <view class="amount-list">
        <view class="amount-item">
          <text class="label">商品总额：</text>
          <text class="value">¥{{ orderInfo.totalAmount }}</text>
        </view>
        <view class="amount-item">
          <text class="label">运费：</text>
          <text class="value">¥{{ orderInfo.freight }}</text>
        </view>
        <view class="amount-item" v-if="orderInfo.discount > 0">
          <text class="label">优惠金额：</text>
          <text class="value discount">-¥{{ orderInfo.discount }}</text>
        </view>
        <view class="amount-item total">
          <text class="label">实付金额：</text>
          <text class="value">¥{{ orderInfo.payAmount }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-actions" v-if="showActions">
      <button class="action-btn cancel" v-if="orderInfo.status === 1" @click="cancelOrder">取消订单</button>
      <button class="action-btn primary" v-if="orderInfo.status === 1" @click="payOrder">立即付款</button>
      <button class="action-btn" v-if="orderInfo.status === 3" @click="confirmReceive">确认收货</button>
      <button class="action-btn" v-if="orderInfo.status === 4 || orderInfo.status === 5" @click="viewRefund">查看退款</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderId: '',
      orderInfo: {
        orderNo: '20231010001',
        createTime: '2023-10-10 12:30:45',
        payTime: '2023-10-10 12:35:20',
        shipTime: '',
        finishTime: '',
        status: 1,
        statusText: '待付款',
        totalAmount: '299.00',
        freight: '10.00',
        discount: '20.00',
        payAmount: '289.00',
        goods: [
          {
            id: 201,
            name: '兴宁手打猪肉丸',
            spec: '规格：大份',
            price: '49.99',
            originalPrice: '59.99',
            unit: '斤',
            quantity: 2,
            image: 'https://pic.rmb.bdstatic.com/bjh/video/46cace1e2cb2827fc520fbc6769ebef5.jpeg'
          },
          {
            id: 202,
            name: '自家做的仙人板',
            spec: '规格：中份',
            price: '9.90',
            originalPrice: '14.90',
            unit: '碗',
            quantity: 1,
            image: 'https://qcloud.dpfile.com/pc/Z1XbyrAyCWz1qqscp3gTNrC2EIqbevu6XaPpnfpH4cyOy49x-iCOD4mvVJcr1l6I.jpg'
          }
        ],
        address: {
          name: '张三',
          phone: '138****8888',
          detail: '广东省深圳市南山区科技园南区XX大厦A座1201室'
        }
      }
    }
  },
  
  computed: {
    // 状态图标
    statusIcon() {
      const iconMap = {
        1: '⏰', // 待付款
        2: '📦', // 待发货
        3: '🚚', // 待收货
        4: '↩️', // 退款中
        5: '✅'  // 已退款
      }
      return iconMap[this.orderInfo.status] || ''
    },
    
    // 状态描述
    statusDesc() {
      const descMap = {
        1: '请在24小时内完成支付，超时订单将自动取消',
        2: '商家正在准备商品，请耐心等待',
        3: '商品正在配送中，请注意查收',
        4: '退款申请已提交，正在处理中',
        5: '退款已完成，款项将原路退回'
      }
      return descMap[this.orderInfo.status] || ''
    },
    
    // 是否显示操作按钮
    showActions() {
      return [1, 3, 4, 5].includes(this.orderInfo.status)
    }
  },
  
  onLoad(options) {
    this.orderId = options.id || ''
    this.loadOrderDetail()
  },
  
  methods: {
    // 加载订单详情
    loadOrderDetail() {
      // 这里应该调用API获取订单详情
      console.log('加载订单详情，订单ID：', this.orderId)
      
      // 模拟根据订单ID加载不同的订单数据
      if (this.orderId.includes('2')) {
        this.orderInfo.status = 2
        this.orderInfo.statusText = '待发货'
        this.orderInfo.payTime = '2023-10-10 12:35:20'
      } else if (this.orderId.includes('3')) {
        this.orderInfo.status = 3
        this.orderInfo.statusText = '待收货'
        this.orderInfo.payTime = '2023-10-10 12:35:20'
        this.orderInfo.shipTime = '2023-10-11 09:15:30'
      } else if (this.orderId.includes('4')) {
        this.orderInfo.status = 4
        this.orderInfo.statusText = '退款中'
        this.orderInfo.payTime = '2023-10-10 12:35:20'
        this.orderInfo.shipTime = '2023-10-11 09:15:30'
      } else if (this.orderId.includes('5')) {
        this.orderInfo.status = 5
        this.orderInfo.statusText = '已退款'
        this.orderInfo.payTime = '2023-10-10 12:35:20'
        this.orderInfo.shipTime = '2023-10-11 09:15:30'
        this.orderInfo.finishTime = '2023-10-12 14:20:15'
      }
    },
    
    // 复制订单号
    copyOrderNo() {
      uni.setClipboardData({
        data: this.orderInfo.orderNo,
        success: () => {
          uni.showToast({
            title: '复制成功',
            icon: 'success'
          })
        }
      })
    },
    
    // 取消订单
    cancelOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要取消该订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里应该调用API取消订单
            uni.showToast({
              title: '订单已取消',
              icon: 'success'
            })
            
            // 刷新订单状态
            this.orderInfo.status = 5
            this.orderInfo.statusText = '已取消'
          }
        }
      })
    },
    
    // 支付订单
    payOrder() {
      // 这里应该调用API支付订单
      uni.showToast({
        title: '正在跳转支付...',
        icon: 'loading'
      })
      
      setTimeout(() => {
        uni.showToast({
          title: '支付成功',
          icon: 'success'
        })
        
        // 刷新订单状态
        this.orderInfo.status = 2
        this.orderInfo.statusText = '待发货'
        this.orderInfo.payTime = new Date().toLocaleString()
      }, 1500)
    },
    
    // 确认收货
    confirmReceive() {
      uni.showModal({
        title: '提示',
        content: '确认已收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里应该调用API确认收货
            uni.showToast({
              title: '已确认收货',
              icon: 'success'
            })
            
            // 刷新订单状态
            this.orderInfo.status = 6
            this.orderInfo.statusText = '已完成'
            this.orderInfo.finishTime = new Date().toLocaleString()
          }
        }
      })
    },
    
    // 查看退款
    viewRefund() {
      uni.navigateTo({
        url: `/pages/refund/detail?orderId=${this.orderId}`
      })
    }
  }
}
</script>

<style>
.order-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 140rpx;
}

/* 订单状态 */
.order-status {
  display: flex;
  align-items: center;
  padding: 50rpx 30rpx;
  background-color: #fff;
  margin-bottom: 24rpx;
  border-radius: 0 0 16rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.status-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}

.status-1 {
  background-color: #fff2e8;
}

.status-2 {
  background-color: #e6f7ff;
}

.status-3 {
  background-color: #f6ffed;
}

.status-4, .status-5 {
  background-color: #fff0f0;
}

.iconfont {
  font-size: 48rpx;
}

.status-info {
  flex: 1;
}

.status-text {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 12rpx;
}

.status-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.4;
}

/* 通用区块样式 */
.address-section, .goods-section, .order-info-section, .amount-section {
  background-color: #fff;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 收货地址 */
.address-info {
  padding: 30rpx;
}

.address-contact {
  margin-bottom: 24rpx;
}

.contact-name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-right: 30rpx;
}

.contact-phone {
  font-size: 30rpx;
  color: #666;
}

.address-detail {
  font-size: 30rpx;
  color: #666;
  line-height: 1.5;
}

/* 商品列表 */
.goods-list {
  padding: 0 30rpx;
}

.goods-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.goods-item:last-child {
  border-bottom: none;
}

.goods-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  background-color: #f7f7f7;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.goods-spec {
  font-size: 26rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.goods-price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.goods-original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-right: 12rpx;
}

.goods-price {
  font-size: 32rpx;
  color: #fa2c19;
  font-weight: bold;
}

.goods-unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 4rpx;
}

.goods-quantity {
  font-size: 28rpx;
  color: #666;
}

/* 订单信息 */
.info-list {
  padding: 0 30rpx;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 180rpx;
  font-size: 30rpx;
  color: #666;
}

.value {
  flex: 1;
  font-size: 30rpx;
  color: #333;
}

.copy-btn {
  font-size: 26rpx;
  color: #1989fa;
  padding: 8rpx 20rpx;
  border: 1px solid #1989fa;
  border-radius: 24rpx;
}

/* 费用明细 */
.amount-list {
  padding: 0 30rpx;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  padding: 28rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.amount-item:last-child {
  border-bottom: none;
}

.amount-item.total {
  padding-top: 30rpx;
  border-top: 1px solid #f5f5f5;
}

.amount-item.total .label {
  font-weight: bold;
  font-size: 32rpx;
}

.amount-item.total .value {
  font-weight: bold;
  color: #fa2c19;
  font-size: 36rpx;
}

.discount {
  color: #07c160 !important;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 10;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  margin-left: 24rpx;
  padding: 18rpx 40rpx;
  font-size: 30rpx;
  border-radius: 40rpx;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #666;
  line-height: 1.2;
  min-width: 180rpx;
  text-align: center;
}

.action-btn.primary {
  background-color: #e93b3d;
  color: #fff;
  border-color: #e93b3d;
}

.action-btn.cancel {
  border-color: #999;
}
</style>